<template>
	<div v-loading="loading">
		<el-form-item v-if="!sendStatus" v-show="hasCityData.length==0" >
			<el-button size="small" type="success" @click.native="select">选择商品</el-button>
			<el-dialog title="商品列表" :visible.sync="dialogTableVisible">
                <div>
                <el-input v-model="categorParams.goodsName" style="width:50%"></el-input>
                <el-button @click="select">搜索</el-button>
                </div>
				<el-table @current-change="handleSelectionChange" tooltip-effect="dark" ref="multipleTable" :data="goodsArr" highlight-current-row width="700" height="300">
					<el-table-column label="商品名称" show-overflow-tooltip width="200">
						<template slot-scope="scope">
							<el-radio v-model="isSelected" :label="scope.$index">{{scope.row.goodsName}}</el-radio>
						</template>
					</el-table-column>
					<el-table-column prop="year" label="年份">
					</el-table-column>
					<el-table-column prop="country" label="国家">
					</el-table-column>
					<el-table-column prop="vipPrice" label="会员价">
					</el-table-column>
					<el-table-column prop="winePrice" label="酒家价格">
					</el-table-column>
					<el-table-column prop="price" label="销售">
					</el-table-column>
					<el-table-column prop="rosePrice" label="销售员价格" width="100">
					</el-table-column>
				</el-table>
				<div class="page_size">
                    <el-pagination background layout="total,prev, pager, next,jumper" :page-size="page_size" @current-change="handleCurrentChange" :total="page">
                    </el-pagination>
					<el-button class="select-submit-btn" @click="submitSelect" type="success">确认</el-button>
				</div>
			</el-dialog>
		</el-form-item>
		<el-form-item v-else v-show="sendUpdateData.length == 0">
			<el-button size="small" type="success" @click.native="select">选择商品</el-button>
			<el-dialog title="商品列表" :visible.sync="dialogTableVisible">
				<el-table @current-change="handleSelectionChange" tooltip-effect="dark" ref="multipleTable" :data="goodsArr" highlight-current-row width="700" height="300">
					<el-table-column label="商品名称" show-overflow-tooltip width="200">
						<template slot-scope="scope">
							<el-radio v-model="isSelected" :label="scope.$index">{{scope.row.goodsName}}</el-radio>
						</template>
					</el-table-column>
					<el-table-column prop="country" label="国家">
					</el-table-column>
					<el-table-column prop="vipPrice" label="会员价">
					</el-table-column>
					<el-table-column prop="winePrice" label="酒家价格">
					</el-table-column>
					<el-table-column prop="price" label="销售">
					</el-table-column>
					<el-table-column prop="rosePrice" label="销售员价格" width="100">
					</el-table-column>
				</el-table>
				<div class="page_size">
                    <el-pagination background layout="total,prev, pager, next,jumper" :page-size="page_size" @current-change="handleCurrentChange" :total="page">
                    </el-pagination>
					<el-button class="select-submit-btn" @click="submitSelect" type="success">确认</el-button>
				</div>
			</el-dialog>
		</el-form-item>
		<el-form-item label="已选择商品">
			<el-table v-if="!sendStatus" :data="hasCityData" border style="width: 100%;">
				<el-table-column show-overflow-tooltip prop="goodsName" label="商品名称">
				</el-table-column>
				<el-table-column prop="stockNum" label="库存"></el-table-column>
				<el-table-column label="操作" >
					<template slot-scope="scope">
						<el-button @click="deleteItem(scope.row.id)" size="mini" type="danger" icon="el-icon-delete"></el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-table v-else :data="sendUpdateData" border style="width: 100%;">
				<el-table-column show-overflow-tooltip prop="goodsName" label="商品名称">
				</el-table-column>
				<el-table-column prop="stockNum" label="库存"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="deleteItem2(scope.row.id)" size="mini" type="danger" icon="el-icon-delete"></el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-form-item>
	</div>
</template>
<script>
import qs from 'qs';
export default {
	data() {
		return {
			loading:false,
			dialogTableVisible: false,
			goodsArr: [],
			hasCityData: [], //已经存在于服务器的地区数据
			multipleSelection: [],
			hasCityId: null, //已存在/选中的数据，只有ID
			id: 0,
			isSelected: '',
            page_size: 10, //每页显示几个
            page: 0, //总页数
            currentPage: 1, //当前页
			categorParams: {
				"numPerPage": 10,
				"order": "asc",
				"pageNum": 1,
				"supplierStateEnum": "OPEN",
                goodsName:''
			}
		}
	},
	props: {
		sendStatus: '',
		sendUpdateData: ''
	},
	methods: {
        /*页面跳转*/
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
            this.categorParams.pageNum = this.currentPage;
            this.select();
        },
		handleSelectionChange(val) {
			this.multipleSelection = val;
			if (val.length > 1) {
				console.log(val)
			}
		},
		// 删除单个供应商
		deleteItem(id) {
			for (var i in this.hasCityData) {
				if (this.hasCityData[i].id == id) {
					this.hasCityData.splice(i, 1);
					delete this.hasCityId;
				}
			}
		},
		// 查看单个供应商
		viewItem(id) {
			window.open(window.location.origin + '#/supplier/' + id);
		},
		// 修改时的删除
		deleteItem2(id) {
			if (this.sendUpdateData[0].id == id) {
				this.sendUpdateData = [];
				delete this.hasCityId;
			}
		},
		// 商品选择框的确认功能
		submitSelect() {
			let groupId = this.multipleSelection.id;
			if (this.sendStatus) {
				this.sendUpdateData.push(this.multipleSelection);
			} else {
				this.hasCityData.push(this.multipleSelection);
			}
			this.hasCityId = groupId;
			this.isSelected = '';
			this.dialogTableVisible = false;
			this.sendData();
		},
		// 点了“选择商品”按钮之后弹出框
		select() {
			this.loading = true;
			this.hasCityId = [];
			this.goodsArr = [];
			this.dialogTableVisible = true;
			this.$post('productList', this.categorParams).then((res) => {
				this.goodsArr = res.data.rows;
				this.page = res.data.total;
				console.log(this.page)
			})
			this.loading = false;
		},
		// 发送数据给父组件
		sendData() {
			this.$emit('sendOneGoodsData', this.hasCityId, this.hasCityData);
		}
	},
}
</script>
<style>
.el-table th > .cell,
.el-table .cell {
  text-align: left !important;
}

.page_size {
  text-align: center;
  padding: 20px;
  width: 95%;
}
</style>
